import React, { useMemo,useCallback,useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import WaitPay from './waitPay'
import { useHistory } from "react-router-dom";
import { Modal } from "antd-mobile";
import {toJS} from 'immutable'
import "antd-mobile/dist/antd-mobile.css";
export default function OrderBar() {
    const orderData = useSelector((state) => state.getIn(["order", "data"]));
    const history = useHistory();
    const dispatch = useDispatch();
    const [show, setShow] = useState(false)
    // 计算总价
    const computed = useMemo(() => {
        let retailPrice = 0;
        let counterPrice = 0;
        let count = 0;
        orderData.forEach((item) => {
            retailPrice += item.get("count") * item.get("retailPrice");
            counterPrice += item.get("count") * item.get("counterPrice");
            count += item.get("count");
        });
        let discountPrice = counterPrice - retailPrice;
        return { retailPrice, discountPrice, count };
    }, [orderData]);

    const paySubmitAction = () => {
      
        setShow(!show)
    };
    const onDelete=useCallback(()=>{
        dispatch({
            type: "order/modify_goods_flag",
            payload: orderData.toJS(),
        });
        history.goBack();
    },[dispatch,orderData])
    const toggleHandleModal=useCallback(()=>{
        setShow(!show)
    })
    return (
        <>
        {show && (
            <WaitPay
                value={computed.retailPrice}
                onClose={toggleHandleModal}
                onDelete={onDelete}
            />
        )}
        <div className="cart-bar">
            <div className="count">
                <p>已选：{computed.count}件</p>
            </div>
            <div className="price">
                <span>合计：￥{computed.retailPrice}</span>
                <span> 已优惠：￥{computed.discountPrice}</span>
            </div>

            <div className="submit">
                <button onClick={paySubmitAction}>付款</button>
            </div>
        </div>
        </>
    );
}
